<template>
	<view>
		<comHeader :config="navConfig"/>
		<image class="chenggong" src="/static/myPic/chenggong.png"></image>
		<view class="texts">支付成功</view>
		
		<view class="item" v-for="(item,index) in itemData"  :key='index'>
			<view class="label">
				<text>订单编号：</text>
				<i>{{item.orderNum}}</i>
			</view>
			<view class="label">
				<text>订单类型：</text>
				<i>{{item.type}}</i>
			</view>
			<view class="label">
				<text>付款金额：</text>
				<i style="color:#5773FE;">{{item.money}}</i>
			</view>
			<view class="label">
				<text>付款方式：</text>
				<i>{{item.style}}</i>
			</view>
			<view class="label">
				<text>消费积分：</text>
				<i>{{item.jifen}}积分</i>
			</view>
			<view class="label">
				<text>商户名称：</text>
				<i>{{item.shopName}}</i>
			</view>
			<view class="line"></view>
			<view class="label">
				<text>创建时间：</text>
				<i>{{item.createTime}}</i>
			</view>
			<view class="label">
				<text>支付时间：</text>
				<i>{{item.payTime}}</i>
			</view>
			<view class="label">
				<text>支付流水号：</text>
				<i>{{item.payNum}}</i>
			</view>
			<view class="label">
				<text>商户编号：</text>
				<i>{{item.shopNum}}</i>
			</view>
			
			<view class="label-num">
				<image :src="item.img"></image>
			</view>
			
			<view class="btn">
				<navigator class="btn1"  url="/pages/home/hotel/hotelDetail"><text>返回商家</text></navigator>
				<navigator class="btn2"  url="/pages/home/hotel/hotel"><text>再逛逛</text></navigator>
				<!-- <view class="btn1"  @click="toShop" url="/pages/home/hotel/hotelDetail"><text>返回商家</text></view>
				<view class="btn2" @click="toShopDetail" url="/pages/home/hotel/hotel"><text>再逛逛</text></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navConfig:{
					comScroll:0,
					isFixed:false, //是否absolute布局
					left:{
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				fromPage:'',
				itemData:[
					{
						orderNum:'23432442',
						type:'酒店',
						money:'￥198',
						style:'微信',
						jifen:'10',
						shopName:'龙芯昂酒店-商务房',
						createTime:'2019-10-21  12:12',
						payTime:'2019-10-21  12:12',
						payNum:'22423',
						shopNum:'22423',
						img:'/static/myPic/2weima.png',
					}
				]
				
			}
		},
		methods:{
			toShop(){
				switch (this.fromPage){
					case 'hotel':
						uni.navigateTo({
							url:'/pages/home/hotel/hotel'
						})
						break;
					case 'spot':
						uni.navigateTo({
							url:'/pages/home/scenicSpot/scenicSpot'
						})
						break;
					case 'food':
						uni.navigateTo({
							url:'/pages/home/food/food'
						})
						break;
					case 'crew':
						uni.navigateTo({
							url:'/pages/home/crew/crew'
						})
						break;
					default:
						break;
				}
			},
			toShopDetail(){
				switch (this.fromPage){
					case 'hotel':
						uni.navigateTo({
							url:'/pages/home/hotel/hotelDetail'
						})
						break;
					case 'spot':
						uni.navigateTo({
							url:'/pages/home/scenicSpot/spotDetail'
						})
						break;
					case 'food':
						uni.navigateTo({
							url:'/pages/home/food/foodDetail'
						})
						break;
					case 'crew':
						uni.navigateTo({
							url:'/pages/home/home/crew/crewDetail'
						})
						break;
					default:
						break;
				}
			}
		},
		created() {
			document.body.style.overflow = 'scroll'
		},
		onLoad(op) {
			this.fromPage = op.fromPage
		},
		left(){
			window.history.go(-2); // 返回上两页
		}
	}
</script>

<style>
	i {
		font-style: normal;
	}
	.chenggong{
		width: 102upx;
		height: 102upx;
		opacity: 1;
		background: rgba(87,115,254,1);
		margin-top: 166upx;
		margin-left: 320upx;
		border-radius: 50upx;
	}
	.texts{
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 309upx;
		margin-top: 20upx;
	}
	.item{
		width: 700upx;
		margin-left: 29upx;
		margin-top: 60upx;
	}
	.label{
		width: 100%;
		height: 80upx;
	}
	.label text{
		height: auto;
		font-size: 28upx;
		height: 80upx;
		line-break: 80upx;
		display: block;
		color: #999999;
		float: left;
	}
	.label i{
		height: auto;
		font-size: 28upx;
		height: 80upx;
		line-break: 80upx;
		display: block;
		color: #333333;
		float: right;
	}
	.line{
		width: 690upx;
		height: 1upx;
		background: rgba(220,220,220,1);
		margin-left: -5upx;
		margin-bottom: 37upx;
	}
	.label-num{
		width: 227upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(0,0,0,1);
		margin-left: 231upx;
		margin-top: 89upx;
	}
	
	.label-num image{
		width: 236upx;
		height: 214upx;
		margin-top: 31upx;
		margin-left: -10upx;
	}
	.btn>navigator{
		display: block;
	}
	.btn1{
		width: 268upx;
		height: 62upx;
		background: rgba(255,255,255,1);
		border-radius: 35upx;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 55upx;
		margin-top: 418upx;
		float: left;
		margin-bottom:60upx;
	}
	.btn1 text{
		width: 120upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(176,175,175,1);
		margin-left: 79upx;
		margin-top: 10upx;
		float: left;
		position: absolute;
		margin-bottom: 10upx;
	}
	.btn2{
		width: 268upx;
		height: 62upx;
		background: rgba(255,255,255,1);
		border-radius: 35upx;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 55upx;
		margin-top: 418upx;
		float: left;
		border: 1upx solid #5773FE;
		margin-bottom:60upx;
	}
	.btn2 text{
		width: 120upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #5773FE;
		margin-left: 90upx;
		margin-top: 10upx;
		float: left;
		position: absolute;
		margin-bottom: 10upx;
	}
	
</style>
